<template>
  <div class="box">
    <div class="title">
      <div>宠物圈</div>
      <van-icon name="search" @click="$router.push('sousuo')" />
    </div>
    <van-swipe
      style="height: 56vw; margin-top: 15px"
      class="my-swipe"
      :autoplay="3000"
      :speed="500"
      :auto="3000"
      indicator-color="white"
    >
      <van-swipe-item>
        <img src="/1.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="/2.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="/3.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="/4.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分区 -->
    <div class="fx">
      <van-grid :border="false" :column-num="4">
        <van-grid-item @click="$router.push('mm')">
          <van-image src="/1.png" />
          <span>猫猫专区</span>
        </van-grid-item>
        <van-grid-item @click="$router.push('dog')">
          <van-image src="/1.png" />
          <span>狗狗专区</span>
        </van-grid-item>
        <van-grid-item @click="$router.push('zz')">
          <van-image src="/1.png" />
          <span>猪猪专区</span>
        </van-grid-item>
        <van-grid-item @click="$router.push('Adopt')">
          <van-image src="/1.png" />
          <span>宠物领养</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 内容 -->
    <div>
      <van-tabs v-model="active">
        <van-tab title="推荐">
          <div class="nei">
            <div class="tou">
              <div>
                <img src="/1.png" alt="" />
                <span>亓哥哥</span>
              </div>
              <div>+&nbsp;关注</div>
            </div>
            <div class="jiao">
              <div>
                哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </div>
              <div>
                <img src="/1.jpg" alt="" />
                <img src="/1.jpg" alt="" />
                <img src="/1.jpg" alt="" />
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="关注"
          ><div class="nei">
            <div class="tou">
              <div>
                <img src="/1.png" alt="" />
                <span>亓哥哥</span>
              </div>
              <div>+&nbsp;关注</div>
            </div>
            <div class="jiao">
              <div>
                哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </div>
              <div>
                <img src="/4.jpg" alt="" />
                <img src="/4.jpg" alt="" />
                <img src="/4.jpg" alt="" />
              </div>
            </div></div
        ></van-tab>

        <van-tab title="最新"
          ><div class="nei">
            <div class="tou">
              <div>
                <img src="/1.png" alt="" />
                <span>亓哥哥</span>
              </div>
              <div>+&nbsp;关注</div>
            </div>
            <div class="jiao">
              <div>
                哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </div>
              <div>
                <img src="/2.jpg" alt="" />
                <img src="/2.jpg" alt="" />
                <img src="/2.jpg" alt="" />
              </div>
            </div></div
        ></van-tab>
        <van-tab title="热门"
          ><div class="nei">
            <div class="tou">
              <div>
                <img src="/1.png" alt="" />
                <span>亓哥哥</span>
              </div>
              <div>+&nbsp;关注</div>
            </div>
            <div class="jiao">
              <div>
                哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </div>
              <div>
                <img src="/3.jpg" alt="" />
                <img src="/3.jpg" alt="" />
                <img src="/3.jpg" alt="" />
              </div>
            </div></div
        ></van-tab>
      </van-tabs>
    </div>
    <my-footer />
  </div>
</template>

<script>
import MyFooter from "@/components/MyFooter.vue";
export default {
  components: { MyFooter },
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #d8f1ef;
}
* {
  box-sizing: border-box;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  border-radius: 10px;
}
.van-grid .van-image {
  width: 50px;
}
.fx {
  border-bottom: 2px solid #ebebeb;
  padding: 10px 3px;
}
.title {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  font-weight: 545;
}
.box {
  padding: 15px 10px 0 10px;
}
.tou {
  display: flex;
  height: 30px;
  justify-content: space-between;
  position: relative;
  > :first-child {
    display: flex;
  }
  > div img {
    border-radius: 50%;
    height: 100%;
  }
  > div span {
    font-size: 5px;
    display: flex;
    align-items: center;
    margin-left: 5px;
  }
  > :last-child {
    height: 20px;
    border-radius: 10px;
    background-color: #fc7296;
    color: white;
    padding: 1px 7px;
    font-size: 10px;
  }
}
.jiao :first-child {
  margin-top: 5px;
  font-size: 15px;
}
.jiao :last-child {
  display: flex;
  > img {
    display: block;
    width: 30%;
    margin: 5px;
  }
}
.nei {
  padding: 20px;
  border: 2px solid #ebebeb;
  border-radius: 10px;
}
</style>
